<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <!-- 
            特殊标签对于 HTML 元素的位置是有限制的，
            例如 <ul>，<ol>，<table> 和 <select>，相应的，
            某些元素仅在放置于特定元素中时才会显示，
            例如 <li>，<tr> 和 <option>。

            否则会将内部标签提取到外部，导致显示的位置有问题，有可能会导致页面展示
            或者页面的布局出现问题。
         -->

        <table>
            <!-- 这里的写法是错误的 -->
            <!-- <row></row> -->
            <!-- 在 table 中一定要使用 tr 标签 -->
            <tr is="vue:row"></tr>
            <!-- 当使用在原生 HTML 元素上时，is 的值必须加上
                前缀 vue: 才可以被解析为一个 Vue 组件。
                这一点是必要的，为了避免和原生的自定义内置元素相混淆。
            -->
        </table>
    </div>
</body>


<template id="cell">
    <tr>
        <td>aaaaaa</td>
        <td>bbbbbb</td>
        <td>cccccc</td>
    </tr>
</template>

<script>
    const app = {
        data() {
            return {}
        },
        methods: {},
        components: {
            row: {
                template: '#cell'
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>